<template>
  <view>
    <up-grid
        :border="false"
        col="4"
    >
      <up-grid-item
          v-for="(listItem,listIndex) in list"
          :key="listIndex"
      >
        <up-icon
            :customStyle="{paddingTop:20+'rpx'}"
            :name="listItem.name"
            :size="22"
        ></up-icon>
        <text class="grid-text">{{ listItem.title }}</text>
      </up-grid-item>
    </up-grid>
    <up-toast ref="uToastRef"/>
  </view>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue';
// 创建响应式数据
const list = reactive([
  {
    name: 'photo',
    title: '图片'
  },
  {
    name: 'lock',
    title: '锁头'
  },
  {
    name: 'star',
    title: '星星'
  },
  {
    name: 'hourglass',
    title: '沙漏'
  },
  {
    name: 'home',
    title: '首页'
  },
  {
    name: 'volume', // 注意：这里修改了 name 从 'star' 改为 'volume'，以避免列表中两个元素具有相同的 name
    title: '音量'
  },
]);

// 创建对子组件的引用
const uToastRef = ref(null);

// 定义方法
const click = (name) => {
  if (uToastRef.value) {
    uToastRef.value.success(`点击了第${name + 1}个`); // 注意：这里加1是因为通常我们是从第1个开始计数的
  }
};
</script>


<style lang="scss" scoped>
.grid-text {
  font-size: 14px;
  color: #909399;
  padding: 10rpx 0 20rpx 0rpx;
  /* #ifndef APP-PLUS */
  box-sizing: border-box;
  /* #endif */
}
</style>
